<template>
	<div class="purchaseProcessingCenterView">
		<div class="cardview">
			<div class="cardview-body">
				<div class="cardview-body-click">
					<el-date-picker
						v-model="pageQuery.startTime"
						type="datetime"
						placeholder="选择开始时间"
					>
					</el-date-picker>
					<el-date-picker
						v-model="pageQuery.endTime"
						type="datetime"
						placeholder="选择结束时间"
					>
					</el-date-picker>
					<el-select
						class="cardview-body-click-info-2"
						v-model="pageQuery.cstatus"
						placeholder="请选择处理状态"
					>
						<el-option
							v-for="item in typeoptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
			    <el-divider direction="vertical"></el-divider>
					<el-button type="primary" icon="el-icon-search" @click="getdata">搜索</el-button>
					<el-button type="primary" @click="regetdata">重置</el-button>
				</div>

				<div class="cardview-body-table">
					<el-table
						:data="bannersList" size="small" border fit
			      highlight-current-row>
						<el-table-column
							prop="title"
							label="标题"
						></el-table-column>
						<el-table-column
							prop="content"
							label="内容"
						></el-table-column>
						<el-table-column
							prop="startsPoint"
							label="处理状态"
						>
							<template slot-scope="scope">
								{{ scope.row.cstatus | restatus}}
							</template>
						</el-table-column>
						<!-- <el-table-column
							prop="carnum"
							label="涉及车辆"
						></el-table-column>
						<el-table-column
							prop="diver"
							label="涉及司机"
						></el-table-column>
						<el-table-column
							prop="upeople"
							label="上报人"
						></el-table-column> -->
						<el-table-column
							prop="startsPoint"
							label="上报时间"
						>
							<template slot-scope="scope">
								{{ formateDate(scope.row.udate)}}
							</template>
						</el-table-column>

						<!-- <el-table-column
							prop="cpeople"
							label="处理人"
						></el-table-column>
						<el-table-column
							prop="startsPoint"
							label="处理时间"
						>
							<template slot-scope="scope">
								{{ formateDate(scope.row.cdate) }}
							</template>
						</el-table-column>
						<el-table-column
							prop="ccontent"
							label="处理内容"
						></el-table-column> -->
						<el-table-column
							prop="startsPoint"
							label="上传图片"
						>
							<template slot-scope="scope">
								<div v-if="scope.row.images">
									<img
										style="width:100px"
										:src="item"
										v-for="(item,index) of scope.row.images.split(',')"
										:key="index"
										alt=""
									>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="phone"
							label="联系电话"
						></el-table-column>
					</el-table>
				</div>

				<div class="cardview-body-changepage">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageQuery.pageNum"
						:page-sizes="[10, 20, 30, 40]"
						:page-size="pageQuery.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="allCount"
					></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import { selectComplaintInfo } from "../../../api/complaintHandlingCenter";
	export default {
		data() {
			return {
				pageQuery: {
					startTime: null,
					endTime: null,
					cstatus: null,
					pageNum: 1,
					pageSize: 10,
				},
				typeoptions: [
					{
						value: 1,
						label: "未处理",
					},
					{
						value: 2,
						label: "已接收",
					},
					{
						value: 3,
						label: "已处理",
					},
				],
				bannersList: null,
				allCount: null,
			};
		},
		mounted() {
			this.getdata();
		},
		filters: {
			restatus: function (e) {
				if (e == 1) {
					return "未处理";
				}
				if (e == 2) {
					return "已接收";
				}
				if (e == 3) {
					return "已处理";
				}
			},
		},
		methods: {
			getdata() {
				selectComplaintInfo(this.pageQuery).then((res) => {
					if (res.code == 200) {
						this.bannersList = res.data.selectComplaintInfo;
						this.allCount = res.data.allCount;
					}
				});
			},
			regetdata() {
				this.pageQuery = {
					startTime: null,
					endTime: null,
					cstatus: null,
					pageNum: 1,
					pageSize: 10,
				};
				this.getdata();
			},
			formateDate(datetime) {
				// let  = "2019-11-06T16:00:00.000Z"
				function addDateZero(num) {
					return num < 10 ? "0" + num : num;
				}
				let d = new Date(datetime);
				let formatdatetime =
					d.getFullYear() +
					"-" +
					addDateZero(d.getMonth() + 1) +
					"-" +
					addDateZero(d.getDate()) +
					" " +
					addDateZero(d.getHours()) +
					":" +
					addDateZero(d.getMinutes()) +
					":" +
					addDateZero(d.getSeconds());
				return formatdatetime;
			},
			//页面跳转
			handleSizeChange(val) {
				this.pageQuery.pageSize = val;
				this.getdata();
			},
			//规格跳转
			handleCurrentChange(val) {
				this.pageQuery.pageNum = val;
				this.getdata();
			},
		},
	};
</script>


<style lang="less" scoped>
	.purchaseProcessingCenterView {
		// padding: 20px;
		// overflow: auto;
    
		.headerText {
			font-size: 25px;
			font-weight: bold;
		}

		.cardview-body {
			.cardview-body-click {
				.cardview-body-click-info {
					display: flex;
					align-items: center;

					.cardview-body-click-info-1 {
						padding-right: 10px;
					}

					.cardview-body-click-info-2 {
						flex: 7;
						padding-right: 10px;
					}
				}
			}

			.cardview-body-table {
				padding: 20px 0 0 0;

				.cardview-body-table-title {
					font-size: 20px;
					font-weight: bold;
					padding-top: 20px;
					padding-bottom: 20px;
					border-top: 1px solid #eeeeee;
					border-bottom: 1px solid #eeeeee;
				}

				.cardview-body-table-img {
					width: 100px;
				}
			}

			.cardview-body-changepage {
				padding: 30px 20px 0 0;
				text-align: right;
			}
		}

		.cardview-body-changepage {
			padding: 30px 20px 0 0;
			text-align: right;
		}
	}
</style>
